<template>
  <div class="homebox">
    <Top class="zoomStyle" />
    <div class="box">
      <HomeMap></HomeMap>
      <div class="left zoomStyle">
        <LeftTop />
        <LeftMiddle />
        <LeftDown />
      </div>
      <div class="right zoomStyle">
        <RightTop />
        <RightMiddle />
        <RightDown />
      </div>
      <div class="middle-down zoomStyle">
        <MiddleDown />
      </div>
    </div>
  </div>
</template>

<script setup>
import Top from "@/components/home/TopCom.vue";
import HomeMap from "@/components/map/HomePageMap.vue";
import LeftTop from "@/components/home/LeftTop";
import RightTop from "@/components/home/RightTop.vue";
import LeftMiddle from "@/components/home/LeftMiddle.vue";
import RightMiddle from "@/components/home/RightMiddle.vue";
import LeftDown from "@/components/home/LeftDown.vue";
import RightDown from "@/components/home/RightDown.vue";
import MiddleDown from "@/components/home/MiddleDown.vue";
import { onMounted } from "vue";
onMounted(() => {
  (function (doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      //orientationchange :检测屏幕发生反转时，就是是横屏还是竖屏时
      recalc = function () {
        var clientWidth = docEl.clientWidth;
        //clientWidth :就是设备的宽度
        if (!clientWidth) return;
        // 这里的375 取决于设计稿的宽度,1rem=100px  1024以上为PC
        if (clientWidth >= 1024) {
          docEl.style.fontSize = '16px';
          var zoomStyle = doc.querySelectorAll('.zoomStyle')
          for (let i = 0; i < zoomStyle.length; i++) {
            const element = zoomStyle[i];
            element.style.cssText = 'zoom:' + (clientWidth / 1920).toFixed(4);
          }
        }
      };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    recalc();
  })(document, window)
})
</script>

<style lang="scss" scoped>
html,
body,
#app {
  width: 100%;
  height: 100%;

}

* {
  margin: 0;
  padding: 0;
}

.homebox {
  width: 100%;
  height: 100%;
}

.box {
  width: 100%;
  height: 100%;
  position: relative;
}

.homebox {
  display: flex;
  flex-direction: column;
}

.left {
  width: 344px;
  height: 100%;
  // background-color: yellowgreen;
  padding: 10px;
  padding-bottom: 0;
  overflow: auto;
  z-index: 99999;
  position: absolute;
}

.right {
  width: 344px;
  height: 100%;
  padding: 10px;
  padding-bottom: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  /* background-color: yellowgreen; */
}

.middle-down {
  width: 1240px;
  height: 350px;
  position: absolute;
  left: 50%;
  margin-left: -620px;
  bottom: 0px;
  display: flex;
}

.el-tabs__item {
  color: white !important;
}
</style>